<template>
  <!-- <div class="container" style="width: 100%; height: 100%;"> -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="active">房间列表</span>
    </div>

    <el-row>
      <el-col :span="24">
        <span>楼栋：</span>
        <CasCader @handleChange="handleChange"></CasCader>

        <span>关键字：</span>
        <el-input class="searchInp" placeholder="请输入内容" v-model="query.key" sizxe="small"></el-input>

        <span>房间类型：</span>
        <el-select style="width: 7%" placeholder="请选择房间类型" sizxe="small" v-model="query.type" clearable>
          <el-option v-for="item in 10" :key="item" :label="item + '室'" :value="item + '室'"> </el-option>
        </el-select>

        <span>朝向：</span>
        <el-select style="width: 7%" placeholder="请选择房间类型朝向" sizxe="small" v-model="query.orientation" clearable>
          <el-option v-for="item in orientationDat" :key="item" :label="item" :value="item"> </el-option>
        </el-select>

        <el-button type="primary" class="searchbtn" size="small" @click="search">查询</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="btns">
      <el-button type="primary" v-if="power.includes('添加房间')" class="searchbtn" size="small" @click="handleAdd">添加</el-button>
      <el-button type="danger" v-if="power.includes('删除房间')" class="danger" size="small" @click="handleDeleteAll">批量删除</el-button>
    </el-row>

    <!--  表格 -->

    <BaseTable
      :tableColumn="tableColumn"
      :tableData="tableData"
      :loading="loading"
      @edit="handleClick"
      @delete="handleDelete"
      :isShowSelection="isShowSelection"
      @handleSelectionChange="handleSelectionChange"
    >
      <template #options="{ row }">
        <el-button v-if="power.includes('修改房间')" @click="handleEdit(row)" type="success" size="mini">修改</el-button>
        <el-button v-if="power.includes('删除房间')" size="mini" @click="handleDelete(row)" type="danger">删除</el-button>
      </template>
    </BaseTable>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="query.psize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts"
    >
    </el-pagination>

    <!-- 添加/编辑弹窗 -->
    <DialogHouse :dialogVisible="dialogVisible" :isEdit="isEdit" :editData="editData" @handleCancel="handleCancel" @refreshList="refreshList">
    </DialogHouse>
  </el-card>
  <!-- </div> -->
</template>

<script>
import CasCader from '../components/CasCader.vue'
import DialogHouse from '../components/DialogHouse.vue'
import { houseslist, delAll, housesdeletedelete } from '../api/administrator'
// import { del } from '../api/stores'
import BaseTable from '@/components/BaseTable.vue'
import { miXinPower } from '@/utils/miXinPower.js'

export default {
  name: 'NewsView',
  components: {
    CasCader,
    DialogHouse,
    BaseTable,
  },
  mixins: [miXinPower],
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      editData: {},
      orientationDat: ['朝南', '朝东', '朝北', '朝西'],
      loading: true,
      query: {
        page: 1,
        psize: 5,
        key: '',
        type: '',
      },
      isShowSelection: true,
      counts: 0,
      selectedRows: [],
      tableColumn: [
        {
          prop: 'id',
          label: '房间id',
          width: 180,
        },
        {
          prop: 'building',
          label: '楼号',
          width: 180,
        },
        {
          prop: 'houseno',
          label: '房间号',
        },
        {
          prop: 'areas',
          label: '面积(平方)',
        },
        {
          prop: 'type',
          label: '房间类型',
        },
        {
          prop: 'orientation',
          label: '朝向',
        },
        {
          prop: 'options',
          label: '操作',
          slotname: 'options',
        },
      ],
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      formLabelWidth: '120px',

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      formInline: {
        user: '',
        region: '',
      },
      tableData: [],
      multipleSelection: [],
    }
  },

  methods: {
    handleAdd() {
      this.isEdit = false
      this.dialogVisible = true
    },

    refreshList() {
      this.dialogVisible = false
      this.isEdit = false
      this.getList()
    },

    handleCancel() {
      this.dialogVisible = false
      this.isEdit = false
    },

    handleChange(buildingarr) {
      // console.log(val)
      this.query.buildingid = buildingarr.length ? buildingarr[buildingarr.length - 1] : ''
    },
    handleEdit(row) {
      console.log(row)

      this.isEdit = true
      this.editData = { ...row }
      this.dialogVisible = true
    },
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows
    },
    handleDeleteAll() {
      console.log(this.selectedRows)
      if (!this.selectedRows.length) return this.$message.error('未选择')
      this.$confirm('此操作将永久删除该记录是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let ids = this.selectedRows.map((item) => item.id)
          await delAll({ ids: ids })
          await this.getList()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    handleDelete(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该记录是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await housesdeletedelete({ id: row.id })
          await this.getList()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    handleClick(row) {
      console.log('编辑操作:', row)
    },

    async getList() {
      this.loading = true
      try {
        let {
          data: { counts, list: listData },
        } = await houseslist(this.query)
        this.counts = counts
        this.tableData = listData
        this.loading = false
        console.log('获取到的数据:', listData)
      } catch (error) {
        console.error('获取数据失败:', error)
      }
    },
    onSubmit() {
      console.log('查询表单提交:', this.formInline)
    },
    handleSizeChange(val) {
      this.query.psize = val
      this.query.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.getList()
    },
    search() {
      this.query.page = 1
      this.getList()
    },
  },

  created() {
    this.getList()
  },
}
</script>

<style lang="less" scoped>
@import url(../assets/css/search.less);

.ico {
  background-color: red;
}
</style>
